<template>
	<div class="container">
		<h3 style="margin-bottom:20px;">
			产品召回
		</h3>
		<el-form label-width="140px">
			<el-row>
				<el-col :span="10">
					<el-form-item label="产品名称：">
						<el-input placeholder="请输入内容" v-model="ruleForm.productName" style="width: 300px" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="批号：">
						<el-input placeholder="请输入内容" v-model="ruleForm.batchNo" style="width: 300px" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="企业：">
						<el-select v-model="name"  value-key="id" placeholder="" style="width:300px" :disabled="disabled">
							<el-option v-for="item in listall" :key="item.id" :label="item.abbreviation" :value="item">{{item.abbreviation}}</el-option>
						</el-select>
					</el-form-item>

				</el-col>
				<el-col :span="12">
					<el-form-item label="召回范围：" >
					    <el-select style="width: 300px" v-model="ruleForm.traceStep" :disabled="disabled">
					        <el-option
					            :label="item"
					            :value="item"
					            v-for="(item, index) in types"
					            :key="index"
					        ></el-option>
					    </el-select>
					</el-form-item>
					<el-form-item label="召回时间：">
						<el-date-picker style="width:300px;" v-model="ruleForm.recallDate" :disabled="disabled" value-format="yyyy/MM/dd" type="date" placeholder="选择日期"> </el-date-picker>
					</el-form-item>
					<el-form-item label="召回图片：">
							<img  :src="showImg+ruleForm.prodImg" class="avatar">
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label-width="140px">
						召回原因及公告(该信息将显示在追溯扫码中)
					</el-form-item>
					<el-form-item label-width="140px">
					    <div ref="editor" style="width:80%;" ></div>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button type="primary" @click="submitrule('ruleForm')">召回</el-button>
			     <el-button  @click="back">返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import axios from "axios"
	import { company_get_child,recall_add,recall_chain } from "@/request/supervisionCenterApi.js"
	import E from 'wangeditor';
	export default{
		data(){
			return{
				ruleForm:{},
				showImg:'http://grove.cpzsyun.com:81/api/plant/file/show/',
				name:'',
				listall:[],
				recalls:{

				},
				types:[],
				id:'',
				 chains:[],
				 disabled:true
			}
		},
		mounted(){
			var editor = new E(this.$refs.editor)
			editor.customConfig.uploadImgServer = this.$store.state.uploadImgurl +'/file/upload';
			editor.customConfig.uploadFileName = 'file';
			editor.customConfig.uploadImgHooks = {
			    customInsert: function (insertImg, result, editor) {

			        var url =  "http://" + window.location.host + "/file/show/" +  result.data
			        insertImg(url)

			    }
			}
			editor.customConfig.onchange = (html) => {
			    this.ruleForm.reason = html
			}
			editor.create();
			editor.txt.html(this.ruleForm.reason)
			this.id = this.$route.query.id
			this.init()
		},
		methods:{

			successFile(res, file){
                console.log(res,file)
				this.ruleForm.prodImg = res.data.fileName
				// console.log(this.recalls)
				},
			init(){
				// axios.get("http://192.168.0.100:8880/plant/recall/load/"+this.id).then((res)=>{
				axios.get("http://grove.cpzsyun.com:81/api/plant/recall/load/"+this.id).then((res)=>{
					this.ruleForm = res.data.recall
					this.name = this.ruleForm.companyName

					this.ruleForm.recallDate = this.ruleForm.recallDate.substring(0,10)
					// this.img = this.$store.state.imageUrls + this.ruleForm.img
					var editor = new E(this.$refs.editor)
					editor.customConfig.uploadImgServer = this.$store.state.uploadImgurl +'/file/upload';
					editor.customConfig.uploadFileName = 'files';
					editor.customConfig.uploadImgHooks = {
						customInsert: function (insertImg, result, editor) {
							// console.log(this.$store.state.imageUrls)
							var url =  "http://" + window.location.host + "/file/show/" +  result.data
							insertImg(url)

						}
					}
					editor.customConfig.onchange = (html) => {
						this.ruleForm.reason = html
					}
					editor.create();
					editor.txt.html(this.ruleForm.reason)

				})
			},

			back(){
				this.$router.go(-1)
			},
			// 召回
			submitrule(){
				let data = {
					id:this.id,
					reason:this.ruleForm.reason
				}
				// axios.post("http://192.168.0.100:8880/plant/recall/modify",data).then((res)=>{
				axios.post("http://grove.cpzsyun.com:81/api/plant/recall/modify",data).then((res)=>{
					this.$notify({
					    title: '提示',
					    message: '编辑成功',
					    type: 'success',
					    duration:1000
					});
					this.$router.go(-1)
				})
			}
		}
	}
</script>

<style scoped>
.avatar{
	width: 147px;
	height: 147px;
}
</style>
